<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue"></script>

</head>
<body>
<div id="app">
    {{ message }}

</div>

<h2>声明式渲染</h2>
<div id="app2">
    <span v-bind:title="message">

        悬停以查看消息
    </span>

    <span title="这是直接写的属性">
        直接给title属性赋值
    </span>
</div>
<br/>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'hello vue'
        }

    })
    var app2 = new Vue({
        el: '#app2',
        data: {
            message: '页面加载于' + new Date().toLocaleString()
        }
    })
</script>
<ul>
    <li>1. v-bind 属性成为指令，指令带有前缀 v- 标示这是Vue提供的特殊属性</li>
    <li>2. 这里是将元素节点的 title 属性和Vue实例中的属性保持一致</li>
</ul>

<br>

<h2>条件与循环</h2>

<div id="app3">
    <span v-if="seen">现在你可以看到了</span>
</div>
<script>
    var app3 = new Vue({
        el: '#app3',
        data: {
            seen: true
        }
    })
</script>

<br>
<div id="app4">
    <ol>
        <li v-for="todo in todos">
            {{ todo.text }}
        </li>
    </ol>
</div>
<script>
    var app4 = new Vue({
        el: '#app4',
        data: {
            todos: [
                {text: '年薪10万'},
                {text: '年薪100万'},
                {text: '自己当老板'}
            ]
        }
    })
</script>

<h2>处理用户输入</h2>
<div id="app5">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessgae">逆转消息</button>
</div>

<script>
    var app5 = new Vue({
        el: '#app5',
        data: {
            message: "hello Vue.js"
        },
        methods: {
            reverseMessgae: function () {
                this.message = this.message.split('').reverse().join('')
            }
        }
    })
</script>
<h2>双向绑定</h2>
<div id="app6">
    <p>{{ message }}</p>
    <input v-model="message">
</div>

<script>
    var app6 = new Vue({
        el: '#app6',
        data: {
            message: 'Hello Vue'
        }
    })
</script>
<h1>组件化应用构建</h1>

<div id="app7">
    <ol>
        <todo-item
                v-for="item in todos"
                v-bind:todo="item"
                v-bind:key="item.id"></todo-item>

    </ol>
</div>

<script>
    Vue.component('todo-item', {
        props: ['todo'],
        template: '<li>{{ todo.text }}</li>'
    });

    var app7 = new Vue({
        el: '#app7',
        data: {
            todos: [
                {id: 0, text: '新沂'},
                {id: 1, text: '泰州'}
            ]
        }
    })
</script>
<br/>
<span id="app8" v-on:click="clickspan">能不能点</span>
<script>
    var app8=new Vue({
        el:'#app8',
        methods:{
            clickspan:function () {
                alert("握草 我被点击了")

            }
        }
    })
</script>


</body>
</html>